@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 240, 249, 255;
  --background-end-rgb: 224, 242, 254;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
    to bottom,
    rgb(var(--background-start-rgb)),
    rgb(var(--background-end-rgb))
  );
  min-height: 100vh;
}

@layer components {
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-full transition-all duration-300 shadow-md hover:shadow-lg;
  }
  
  .glowing-text {
    @apply relative;
  }
  
  .glowing-text::after {
    @apply content-[''] absolute -inset-1 bg-secondary-400 rounded-lg blur opacity-30 -z-10 transition-all duration-300;
  }
  
  .glowing-text:hover::after {
    @apply opacity-50;
  }
  
  .feature-card {
    @apply bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-primary-100;
  }
}

/* 新增动画效果 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blinkCursor {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: rgba(86, 182, 139, 0.75);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-slideInRight {
  animation: slideInRight 0.5s forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.5s forwards;
}

.animate-fadeIn {
  animation: fadeIn 1s forwards;
}

.animate-zoomIn {
  animation: zoomIn 0.5s forwards;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

.animation-delay-700 {
  animation-delay: 700ms;
}

.shimmer-bg {
  background: linear-gradient(90deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.8) 50%, 
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  max-width: 100%;
  width: 0;
  animation: 
    typewriter 2s steps(40, end) forwards,
    blinkCursor 0.75s step-end infinite;
}

/* 波浪动画 */
@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.8);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}

.wave-1 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-31.8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: 100% 100px;
  animation: wave 15s -3s linear infinite;
  transform: translate3d(0, 0, 0);
}

.wave-2 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-31.8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: 100% 80px;
  animation: wave 12s linear reverse infinite;
  transform: translate3d(0, 0, 0);
} 